<template>
  <div class="photoinfo-container">
    <h1>{{photoinfo.title}}</h1>
    <div class="subTitle">
      <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
      <span>点击：{{photoinfo.click}}次</span>
    </div>
    <hr>
    <div class="content" v-html="photoinfo.content"></div>
    <!-- 缩列图区域 -->
    <vue-preview
      :list="list"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
    />
    <!-- 记得给子组件传递id -->
    <cmt_box :id="id"></cmt_box>
  </div>
</template>
<script>
// 导入评价子组件
import cmt_box from "../subcomponents/content.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {},
      list: [] //缩略图数组
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThumImages();
  },
  methods: {
    getPhotoInfo() {
      this.$http.get("api/getimageinfo/" + this.id).then(result => {
        if (result.body.status == 0) {
          // console.log(result.body.message[0]);
          this.photoinfo = result.body.message[0];
        }
      });
    },

    getThumImages() {
      //获取缩略图的数据
      this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.body.status == 0) {
          //为每个缩略图添加w , h 属性
        result.body.message.forEach(element => {
            element.w=600;
            element.h=400;
        });
          // console.log(result.body.message);
          this.list=result.body.message;
        }
      });
    }
  },
  components: {
    cmt_box
  }
};
</script>
<style lang="scss" scoped>
.photoinfo-container {
  padding: 0 10px;
  h1 {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: #26a2ff;
  }
  .subTitle {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
  }
  .content {
    font-size: 13px;
    line-height: 30px;
  }
}
</style>
